<template>
  <div>
    <el-dialog title="编辑" :visible.sync="dialogVisibleAdd" width="30%">
      <div>
        <el-form ref="formEdit" :model="editForm" label-width="80px">
          <el-form-item label="套餐分类">
            <el-select
              v-model="editForm.type"
              placeholder="请选择套餐分类"
              @change="handleChangeType"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div v-if="editForm.type">
            <el-form-item label="10元套餐">
              <el-select
                v-model="editForm.package_code_10"
                placeholder="请选择10元套餐"
              >
                <el-option
                  v-for="item in packageOptions"
                  :key="item.package_code"
                  :label="item.name"
                  :value="item.package_code"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="20元套餐">
              <el-select
                v-model="editForm.package_code_20"
                placeholder="请选择20元套餐"
              >
                <el-option
                  v-for="item in packageOptions"
                  :key="item.package_code"
                  :label="item.name"
                  :value="item.package_code"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="30元套餐">
              <el-select
                v-model="editForm.package_code_30"
                placeholder="请选择30元套餐"
              >
                <el-option
                  v-for="item in packageOptions"
                  :key="item.package_code"
                  :label="item.name"
                  :value="item.package_code"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="50元套餐">
              <el-select
                v-model="editForm.package_code_50"
                placeholder="请选择50元套餐"
              >
                <el-option
                  v-for="item in packageOptions"
                  :key="item.package_code"
                  :label="item.name"
                  :value="item.package_code"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="100元套餐">
              <el-select
                v-model="editForm.package_code_100"
                placeholder="请选择100元套餐"
              >
                <el-option
                  v-for="item in packageOptions"
                  :key="item.package_code"
                  :label="item.name"
                  :value="item.package_code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogAdd">取 消</el-button>
        <el-button type="primary" @click="sureDialogAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["editDetails", "tableDataType", "tableDataEquirty"],
  data() {
    return {
      dialogVisibleAdd: false,
      editForm: {
        type: "",
        package_code_10: "",
        package_code_20: "",
        package_code_30: "",
        package_code_50: "",
        package_code_100: "",
      },
      typeOptions: [],
      packageOptions: [],
    };
  },
  watch: {
    editDetails: {
      handler(newVal) {
        this.editForm = newVal;
      },
    },

    tableDataType: {
      handler(newVal) {
        this.typeOptions = newVal;
      },
    },

    tableDataEquirty: {
      handler(newVal) {
        this.packageOptions = newVal;
      },
    },
  },
  methods: {
    // 取消
    cancelDialogAdd() {
      this.$emit("cancelDialogAdd", "");
    },
    // 确定
    sureDialogAdd() {
      this.$emit("sureDialogAdd", this.editForm);
    },

    // 切换套餐分类
    handleChangeType(e) {
      this.$emit("handleChangeType", e);
    },
  },
};
</script>
<style scoped lang="scss"></style>
